<template>
  <div class="mobile-container">
    <div class="app-content">
      <!-- 顶部栏 -->
      <div class="header">
        <div class="header-top">
          <div class="back-icon" @click="handleBack">
            <Icon icon="mdi:arrow-left"/>
          </div>
          <div class="page-title">工分转置换宝</div>
          <div class="placeholder"></div>
        </div>
      </div>

      <!-- 主要内容 -->
      <div class="convert-content">
        <!-- 当前时间 -->
        <div class="current-time">{{ currentTime }}</div>

        <!-- 接收渠道 -->
        <div class="receive-channel">
          <div class="channel-title">接收渠道</div>
          <div class="channel-item">
            <div class="channel-info">
              <div class="channel-name">置换宝</div>
              <div class="freeze-time">[冻结{{ freezeHours }}小时]</div>
            </div>
            <Icon icon="mdi:chevron-right" class="channel-arrow" />
          </div>
        </div>

        <!-- 转换数量 -->
        <div class="convert-amount">
          <div class="amount-title">转换数量</div>
          <div class="amount-input-group">
            <input
              v-model="inputAmount"
              type="number"
              class="amount-input"
              placeholder="0"
              @input="handleAmountInput"
            >
          </div>

          <!-- 提示信息 -->
          <div class="tip-message" :class="{ 'error': showError }">
            {{ tipMessage }}
          </div>
        </div>

        <!-- 损耗信息 -->
        <div class="loss-info">
          <div class="loss-text">当前损耗：{{ lossRate }}%</div>
        </div>

        <!-- 转换按钮 -->
        <div class="convert-actions">
          <button
            class="convert-btn"
            :class="{ 'disabled': !canConvert }"
            :disabled="!canConvert"
            @click="handleConvert"
          >
            转置换宝
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from '@iconify/vue2'

export default {
  name: 'PointsConvertPage',
  components: {
    Icon
  },
  data() {
    return {
      currentTime: '10:45',
      inputAmount: '',
      userBalance: 1, // 用户账户余额
      minConvertAmount: 20, // 最少转换数量
      lossRate: 50, // 损耗率
      freezeHours: 24, // 冻结小时数
      showError: false,
      tipMessage: ''
    }
  },
  computed: {
    canConvert() {
      const amount = Number(this.inputAmount)
      return amount >= this.minConvertAmount && amount <= this.userBalance
    }
  },
  methods: {
    handleBack() {
      this.$router.go(-1)
    },

    handleAmountInput() {
      const amount = Number(this.inputAmount)

      if (this.inputAmount === '') {
        this.showError = false
        this.tipMessage = `输入最少${this.minConvertAmount}个`
        return
      }

      if (amount < this.minConvertAmount) {
        this.showError = true
        this.tipMessage = `输入最少${this.minConvertAmount}个，您账户余额${this.userBalance}个`
      } else if (amount > this.userBalance) {
        this.showError = true
        this.tipMessage = `输入数量超过可转换数量，最多转换${this.userBalance}个`
      } else {
        this.showError = false
        this.tipMessage = `可转换数量：${this.userBalance}个`
      }
    },

    handleConvert() {
      if (!this.canConvert) return

      console.log('开始转换:', {
        amount: this.inputAmount,
        lossRate: this.lossRate,
        freezeHours: this.freezeHours
      })

      // 这里可以调用转换接口
      alert(`转换${this.inputAmount}个工分到置换宝`)
    }
  }
}
</script>

<style scoped>
.mobile-container {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

.app-content {
  width: 375px;
  min-height: 667px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 顶部栏样式 */
.header {
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-icon {
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.placeholder {
  width: 36px;
}

/* 主要内容样式 */
.convert-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* 当前时间 */
.current-time {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
}

/* 接收渠道 */
.receive-channel {
  margin-bottom: 30px;
}

.channel-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}

.channel-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
}

.channel-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.freeze-time {
  font-size: 14px;
  color: #999;
}

.channel-arrow {
  font-size: 20px;
  color: #999;
}

/* 转换数量 */
.convert-amount {
  margin-bottom: 20px;
}

.amount-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}

.amount-input-group {
  position: relative;
}

.amount-input {
  width: 100%;
  height: 60px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 0 20px;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: all 0.3s ease;
  background: white;
}

.amount-input:focus {
  border-color: #667eea;
}

.amount-input::placeholder {
  color: #ccc;
  font-size: 18px;
}

/* 提示信息 */
.tip-message {
  font-size: 14px;
  margin-top: 8px;
  min-height: 20px;
}

.tip-message:not(.error) {
  color: #999;
}

.tip-message.error {
  color: #ff4d4f;
}

/* 损耗信息 */
.loss-info {
  text-align: center;
  margin-bottom: 30px;
}

.loss-text {
  font-size: 14px;
  color: #666;
}

/* 转换按钮 */
.convert-actions {
  margin-top: auto;
}

.convert-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.convert-btn:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.convert-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .mobile-container {
    padding: 0;
  }

  .app-content {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }

  .convert-content {
    padding: 16px;
  }

  .current-time {
    font-size: 28px;
  }

  .amount-input {
    height: 50px;
    font-size: 20px;
  }
}
</style>
